<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyCms系统</title>
    <link rel="stylesheet" href="__ROOT__/public/static/layui/css/layui.css">

    <style>

        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #1E9FFF;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .box{
            width: 360px;
            height: 300px;
            position: absolute;
            background:rgb(255,255,255);
            left: 50%;
            top: 40%;
            margin-left: -220px;
            margin-top: -100px;
            padding-top: 2%;
            box-shadow:0 0 8px #eeeeee;
            border-radius:3px;

        }

        .yzm-img{
            width: 35%;
            float: left;
            margin-left: 10%;
        }

        .yzm-input{
            width: 45%;
            float: left;
        }

        .input{
            margin: 0 auto;
            width: 70%
        }

        .fomr{

        }

        h2{
            text-align: center;
            margin-bottom: 5%;
        }




    </style>
</head>
<body>
<div class="layui-container">
    <div class="box">
        <h2>EasyCms</h2>

        <form class="layui-form fomr"  method="post"  id="dlForm" >

            <div class="layui-form-item">

                <div class="layui-input-block input" >
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">

                <div class="layui-input-block input">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block input">
                    <input type="text" name="captcha_code" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input yzm-input">
                    <img src="{:captcha_src()}" id="vcode" class="verify yzm-img" >
                </div>

            </div>

            <div class="layui-form-item" style="height: 15px;display: block;color: red">

                <div class="layui-input-block input">
                    <p id="hint"></p>
                </div>
            </div>




            <div class="layui-form-item">
                <div class="layui-input-block input">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" style="margin: 0px auto;display: block;width: 50%" >立即登录</button>
                </div>
            </div>



        </form>

    </div>
</div>
<script src="__ROOT__/public/static/js/jquery-3.4.1.min.js"></script>
<script src="__ROOT__/public/static/layui/layui.js"></script>
<script src="__ROOT__/public/static/js/jquery.particleground.min.js"></script>
<script src="__ROOT__/public/static/js/jquery.Form.js"></script>
<script>
    layui.use('form', function(){
        var form = layui.form;

        // 粒子线条背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#7ec7fd'
            });
        });



        form.on('submit(formDemo)', function(data){
            $("#hint").html('');
            $("#dlForm").ajaxSubmit({
                url:"{:url('admin/login/login')}",
                success: function (rsp) {
                    rsp=$.parseJSON(rsp)
                    if (rsp['code']<0){
                        $("#hint").html(rsp['message']);
                        let src = $("#vcode").attr('src') + '?vt=' + Math.random();
                        $("#vcode").attr('src',src);//登录错误时验证码刷新
                    }else {
                        window.location.href = "{:url('admin/index/index')}";

                    }

                }
            })
            return false;

        });

    });
</script>

<script>

    // 点击更新验证码图片
    $('#vcode').click(function () {
        let src = $(this).attr('src') + '?vt=' + Math.random();
        $(this).attr('src',src);
    })


</script>


</body>
</html>